<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"></meta>
        <title></title>
        <script src="js/vue.global.js"></script>
        <style>
            .box {
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute; /* 使用绝对定位 */
                top: 0;
                left: 0;
                transition: transform 0.1s; /* 添加平滑过渡效果 */
            }
        </style>
    </head>
    <body>
        <div id="app" tabindex="1">
            弹起来：<input @keyup="getKey" />    <br>
            按下去：<input @keydown.enter="login" />
            <h1 align="center">{{letter}}</h1>
            通过上下左右键位移动div
            <div class="box" :style="{ transform: `translate(${position.x}px, ${position.y}px)` }"></div>
        </div>
        <script>
            Vue.createApp({
                data() {
                    return {
                        letter: 'A', // 初始化显示的内容
                        position: { x: 0, y: 0 } // 用于记录 div 的位置
                    }
                },
                mounted() {
                    // 监听全局键盘事件
                    document.addEventListener('keydown', this.pressKey);
                },
                methods: {
                    // 键盘按下事件处理
                    pressKey(event) {
                        this.letter = event.key; // 将按键内容赋值给 letter

                        // 根据按键移动 div
                        switch (event.key) {
                            case 'ArrowUp': // 上键
                                this.position.y -= 10;
                                break;
                            case 'ArrowDown': // 下键
                                this.position.y += 10;
                                break;
                            case 'ArrowLeft': // 左键
                                this.position.x -= 10;
                                break;
                            case 'ArrowRight': // 右键
                                this.position.x += 10;
                                break;
                        }
                    },
                    // 登录方法
                    login() {
                        alert('登录')
                    },
                    // 按键事件处理方法
                    getKey(event) {
                        if (event.key === 'Enter') {  // 回车键
                            alert('登录')
                        }
                        if (event.key === ' ') {  // 空格键
                            alert('敲了空格')
                        }
                    }
                },
            }).mount('#app')
        </script>
    </body>
</html>